<template>
	<view class="mine-page page">
		<CustomNav title="野生动物" :isBack="true"></CustomNav>
		<view class="menu-block">
			<view class="menu-item" v-for="item in menuList" :key="item.id" @click="navigate(item.url)">
				<image src="@/static/image/animal.png" mode="aspectFill" class="icon-img"></image>
				<view class="title-item">
					<view class="title">{{item.title}}</view>
					<view class="text">{{item.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuList: [{
						id: 1,
						title: '野生动物救助',
						text: '可以报告野生动物遇到的困难或危险情况，请求救助。',
						url: '/page_pack/animal/help'
					},
					{
						id: 2,
						title: '野生动物观察记录',
						text: '可以记录自己的野生动物观察记录，包括拍照、标注位置、记录行为等。',
						url: '/page_pack/animal/record'
					},
					{
						id: 3,
						title: '科普宣教',
						text: '可以浏览和学习关于野生动物保护的科普文章、视频和活动信息。',
						url: '/page_pack/animal/article'
					},
					{
						id: 4,
						title: '野生动物地图',
						text: '可以查看地图上标注的野生动物活动区域，了解野生动物的分布。',
						url: '/page_pack/animal/map'
					},
					{
						id: 5,
						title: '野生动物法律法规',
						text: '可以浏览和学习关于野生动物保护的法律法规。',
						url: '/page_pack/law/law'
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.mine-page {
		overflow: hidden;

		.menu-block {
			margin-top: 26%;
			padding: 30rpx;

			.menu-item {
				padding: 40rpx 30rpx;
				background: linear-gradient(to right, #7354DB, #2E64DB);
				margin-bottom: 30rpx;
				border-radius: 20rpx;
				display: flex;

				.icon-img {
					width: 70rpx;
					height: 70rpx;
					margin-right: 20rpx;
				}

				.title-item {
					width: calc(100% - 90rpx);
					display: flex;
					flex-direction: column;
					color: #fff;

					.title {
						margin-top: 12rpx;
						font-size: 34rpx;
						font-weight: bold;
					}

					.text {
						margin-top: 20rpx;
						font-size: 26rpx;
						line-height: 50rpx;
					}
				}
			}

			.menu-item:nth-child(2) {
				background: linear-gradient(to right, #2B6DD4, #559F8B);
			}

			.menu-item:nth-child(3) {
				background: linear-gradient(to right, #3A3B87, #529AE2);
			}

			.menu-item:nth-child(4) {
				background: linear-gradient(to right, #532B6D, #3751A3);
			}

			.menu-item:nth-child(5) {
				background: linear-gradient(to right, #3A3B87, #3466FF);
			}
		}
	}
</style>